<template>
  <el-dialog
    title="省客户列表"
    append-to-body
    width="50%"
    :visible.sync="visible"
  >
    <el-table
      v-loading="tableLoading"
      element-loading-customClass="ne-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
      border
      :data="tableData"
      tooltip-effect="dark"
      max-height="400"
      style="width: 100%"
      header-row-class-name="ne-header"
      row-class-name="ne-row-c"
      @current-change="clickPicker"
    >
      <el-table-column label="选择" align="center" min-width="40%">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        prop="provRegionName"
        label="省"
        header-align="center"
        align="center"
        min-width="40%"
      ></el-table-column>
      <el-table-column
        prop="commonRegionName"
        label="本地"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="custId"
        label="省客户ID"
        header-align="center"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="custNumber"
        label="省客户编码"
        header-align="center"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" width="500">
            <el-table :data="scope.row.custManagerTeams">
              <el-table-column
                prop="staffId"
                label="客户经理帐号"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="staffName"
                label="客户经理名称"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="staffCode"
                label="人力账号"
                header-align="center"
                align="center"
              ></el-table-column>
            </el-table>
            <el-link size="mini" type="primary" slot="reference"
              >客户经理</el-link
            >
          </el-popover>
          <span style="margin: 0 10px"></span>
          <el-popover trigger="hover" width="500">
            <el-table :data="scope.row.contacts">
              <el-table-column
                prop="contactName"
                label="联系人姓名"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="mobilePhone"
                label="联系人电话"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="eMail"
                label="邮箱"
                header-align="center"
                align="center"
              ></el-table-column>
            </el-table>
            <el-link size="mini" type="primary" slot="reference"
              >联系人</el-link
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center" style="margin-top: 10px">
      <el-pagination
        background
        layout="prev, pager, next, total, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="totalResult"
      >
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer text-center" style="padding-top: 0">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="pickerEnd">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Province",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    Data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    queryLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableLoading: false,
      pageSizes: [5, 10, 15, 20],
      provPageInfo: {
        pageSize: 10,
        pageIndex: 1,
      },
      custList: [],
      custMnrvisible: false,
      concatvisible: false,
      tableRadio: null,
    };
  },
  computed: {
    tableData: {
      get() {
        return this.Data.customer;
      },
      set(val) {
        return val;
      },
    },
    currentPage: {
      get() {
        return ~~this.Data.pageIndex;
      },
      set() {
        return this.provPageInfo.pageIndex;
      },
    },
    pageSize: {
      get() {
        if (~~this.Data.pageSize) {
          return ~~this.Data.pageSize;
        } else {
          return this.provPageInfo.pageSize;
        }
      },
      set() {
        return this.provPageInfo.pageSize;
      },
    },
    totalResult: {
      get() {
        return ~~this.Data.total;
      },
      set(val) {
        return val;
      },
    },
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("updateshow", val);
      },
    },
  },
  watch: {
    queryLoading(val) {
      this.tableLoading = val;
    },
  },
  methods: {
    handleSizeChange(val) {
      this.provPageInfo.pageSize = val;
      this.$emit("prohsChange", this.provPageInfo);
    },
    handleCurrentChange(val) {
      this.provPageInfo.pageIndex = val;
      this.$emit("prohsChange", this.provPageInfo);
    },
    /**
     * 单选表格数据时
     */
    clickPicker(item) {
      this.tableRadio = item;
    },

    /**
     * 表格数据完成点确定时
     */
    pickerEnd() {
      this.visible = false;
      this.$emit("pickerEnd", this.tableRadio);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination {
  display: inline-block;
}
::v-deep .el-pagination__total {
  margin-left: 0.2rem;
}
::v-deep .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: transparent;
}
::v-deep .ne-header {
  height: 0.4rem;
  box-sizing: border-box;
  th {
    background-color: #dddddd78;
    color: #333;
    height: 0.4rem;
    box-sizing: border-box;
  }
}
::v-deep .el-dialog__footer {
  padding-top: 0;
}
::v-deep .ne-row-c {
  height: 0.4rem;
  box-sizing: border-box;
}
</style>
